<template>
	<view>
		<view v-if="type">
			<view class="title" style="text-align: center;" @click="changeType">
				当前选择的是{{ type ? '大厅' : '包厢' }}；点击切换
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view
					v-for="(item, index) in boxList"
					:key="index"
					style="display: flex;width: 375rpx;justify-content: center;"
				>
					<view
						style="display: flex;justify-content: center;align-items: center;flex-direction: column;"
					>
						<view style="margin: 20rpx;">{{ item.table_num }}号桌</view>
						<view>
							<image
								:src="imgUrl + '/' + item.qrcode_image"
								@click="downImg(imgUrl + '/' + item.qrcode_image)"
								mode="widthFix"
								style="width: 300rpx;height: 300rpx;"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!type">
			<view class="title" style="text-align: center;" @click="changeType">
				当前选择的是{{ type ? '大厅' : '包厢' }}；点击切换
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view
					v-for="(item, index) in baoList"
					:key="index"
					style="display: flex;width: 375rpx;justify-content: center;"
				>
					<view
						style="display: flex;justify-content: center;align-items: center;flex-direction: column;"
					>
						<view style="margin: 20rpx;">{{ item.box_name }}包厢</view>
						<view>
							<image
								:src="imgUrl + '/' + item.qrcode_image"
								mode="widthFix"
								style="width: 300rpx;height: 300rpx;"
								@click="downImg(imgUrl + '/' + item.qrcode_image)"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			boxList: '',
			baoList: '',
			imgUrl: this.$DOMAIN_URL,
			type: true
		};
	},
	methods: {
		getData() {
			var that = this;
			uni.request({
				url: 'https://dlm.henatop.com//api/wanlshop/shop/getBoxList',
				header: {
					token: uni.getStorageSync('token')
				},
				method: 'POST',
				data: {
					shop_id: uni.getStorageSync('merchant').id
				},
				success(res) {
					that.boxList = res.data.data.filter(el => {
						return !el.box_name;
					});
					that.baoList = res.data.data.filter(el => {
						return el.box_name;
					});
					console.log(res.data.data);
				}
			});
		},
		changeType() {
			this.type = !this.type;
		},
		downImg(url) {
			uni.previewImage({
				urls: [url],
				success(res) {
					console.log(res);
				}
			});
		}
	},
	onLoad() {
		this.getData();
	}
};
</script>

<style lang="scss" scoped>
.title {
	width: 750rpx;
	height: 80rpx;
	background: linear-gradient(90deg, #ffc100 0%, #ffc100 100%);
	color: #fff;
	line-height: 80rpx;
	font-weight: bold;
	font-size: 36rpx;
}
</style>
